<template>
	<view>
		<uni-nav-bar
			fixed
			title="修改密码"
			status-bar
			left-icon="left"
			background-color="#2163e0"
			color="#fff"
			@clickLeft="back"/>
		<view class="dynamic">
			<uni-forms
				:label-width="80">
				<uni-forms-item label="新密码" required name="password">
					<uni-easyinput
					    type="password"
						v-model="password"
						placeholder="请输入新密码" />
				</uni-forms-item>
				<uni-forms-item label="确认密码" required name="confirmpassword">
					<uni-easyinput
					    type="password"
						v-model="confirmpassword"
						placeholder="请确认新密码" />
				</uni-forms-item>
			</uni-forms>
			<button style="margin-top: 30px;" type="primary" @click="submit()">提交</button>
		</view>
	</view>
</template>

<script>
import api from "../../api/api";
import img from "../assets/fail.png";
export default {
	onReady() {},
	onLoad() {},
	data() {
		return {
			username: uni.getStorageSync("userInfo").result.userInfo.username,
			password: '',
			confirmpassword: '',
		};
	},
	methods: {
		submit() {
			if(!this.password){
				this.showToast('新密码不能为空')
				return;
			}
			if(!this.confirmpassword){
				this.showToast('确认密码不能为空')
				return;
			}
			if(this.password !== this.confirmpassword){
				this.showToast('两次密码输入不一致')
				return;
			}
			var data = {
				username: this.username,
				password: this.password,
				confirmpassword: this.confirmpassword,
			};
			api.changePassword(data).then((e) => {
				this.showToast(e.data.message)
				if (e.data.success) {
					uni.navigateTo({
						url: "/pages/component/signsuccess?msg="+e.data.message,
					});
				}
			});
			
		},
		showToast(val){
			uni.showToast({
				title: val,
				image: img,
			});
		},
		back() {
		  uni.navigateBack({
		    delta: 1,
		  });
		},
	},
};
</script>

<style lang="scss" scoped>
.header {
	height: 50px;
	width: 100vw;
	.home-content {
		height: 50px;
		width: 100vw;
		position: fixed;
		top: 0;
		color: #fff;
		font-weight: 700;
		.home-title {
			position: relative;
			width: 100%;
			height: 50px;
			line-height: 50px;
			background-color: #2163e0;
			padding-left: 10px;
			.btn {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, 0);
			}
		}
	}
}
.choose {
	width: 100vw;
	height: 60px;
	display: flex;
	justify-content: space-between;
	view {
		width: 49%;
		height: 60px;
		line-height: 60px;
		font-weight: 700;
		font-size: 18px;
		text-align: center;
	}
}
.dynamic {
	width: 90vw;
	margin: 10px auto;
	::v-deep .file-picker__box-content {
		background-color: #fff;
	}
	.btn {
		width: 50vw;
		margin: 10px auto;
	}
	.selectBar {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		.select-item {
			margin-top: 10px;
			flex: 1 0 calc(33%);
			width: 80px;
			padding: 5px;
			background-color: #ccc;
			font-size: 12px;
			color: #fff;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
		}
	}
}
</style>
